/**
 * Created by Void on 2017/9/15.
 */

import {
    Component, ViewEncapsulation, AfterViewInit, Input, Output, EventEmitter, ViewChildren, QueryList, ViewChild,
    ElementRef, Renderer2
} from '@angular/core';

import {SuperTabButton} from './super-tab-button';
import {SuperTabsConfig} from "./super-tabs";
// import {SuperTabsPanGesture} from './super-tabs-pan-gesture';
import {Platform} from "ionic-angular/index";

@Component({
    selector: 'super-tabs-toolbar',
    template: `
<ion-toolbar  mode="ios" [class.scroll-tabs]="false">
<div class="tab-buttons-container" #tabButtonsContainer>
<div class="tab-buttons" #tabButtons>
<super-tab-button *ngFor="let tab of tabs;let i = index" (select)="onTabSelect(i)" [color]="color" [title]="tab.title" [badge]="tab.badge" [selected]="selectedTab === i" [badgeColor]="badgeColor"></super-tab-button>
</div>
<div class="indicator {{ 'button-ios-' + color }}" #indicator></div></div>
</ion-toolbar>
`,
    encapsulation: ViewEncapsulation.None
})

export class SuperTabsToolbar implements AfterViewInit {

    @Input() color:string;
    @Input() badgeColor:string;
    @Input() scrollTabNum:number;
    @Input() selectedTab:number = 0;
    @Input() config:SuperTabsConfig;

    @Output() tabSelect:EventEmitter<any> = new EventEmitter<any>();

    @ViewChildren(SuperTabButton) private tabButtons:QueryList<SuperTabButton>;
    @ViewChild('tabButtonsContainer') private tabButtonsContainer:ElementRef;
    @ViewChild('indicator') private indicator:ElementRef;
    @ViewChild('tabButtons') private tabButtonsBar:ElementRef;

    indicatorPosition:number = 0;
    indicatorWidth:number = 0;
    //
    segmentPosition:number = 0;
    segmentButtonWidths:number[] = [];
    segmentWidth:number = 0;

    tabs:any[] = [];

    // private gesture:SuperTabsPanGesture;

    private animationState = {
        indicator: false,
        segment: false
    };


    constructor(
        private el:ElementRef,
        private plt:Platform,
        private rnd:Renderer2
    ) {
    }

    onTabSelect(index:number){
        this.tabSelect.emit(index);
    }

    ngAfterViewInit() {
        // this.gesture = new SuperTabsPanGesture(this.rnd,this.el,this.plt,this.config);
        // this.gesture.onMove = (delta:number) => {
        //
        // }

        // 设置 super-button的宽度

        let colW =  'col-' + Math.min(this.tabButtons.length,this.scrollTabNum)%12;
        console.log(Math.min(this.tabButtons.length,this.scrollTabNum));
        console.log(Math.min(this.tabButtons.length,this.scrollTabNum)%12);
        this.tabButtons.forEach(superBtn => {
            this.rnd.setAttribute(superBtn.getNativeElement(),colW,'');
        });

        let width = this.el.nativeElement.offsetWidth / Math.min(this.tabs.length,this.scrollTabNum);
        console.log(width);
        this.rnd.setStyle(this.indicator.nativeElement, 'width',  width + 'px');
        this.setIndicatorWidth(false);
    }

    setIndicatorWidth(animate?: boolean) {
        this.setIndicatorProperties(this.indicatorPosition, animate);
    }

    setIndicatorPosition(position: number, animate?: boolean) {
        this.setIndicatorProperties(position, animate);
    }
    setIndicatorProperties(position: number, animate?: boolean) {
        this.indicatorPosition = position;
        this.toggleAnimation('indicator', animate);
        this.rnd.setStyle(this.indicator.nativeElement, this.plt.Css.transform,  'translate3d(' + (position - this.segmentPosition) + 'px, 0, 0)')
    }
    private toggleAnimation(el: 'indicator' | 'segment', animate: boolean) {

        // if (!this.config || this.config.transitionDuration === 0)
        //     return;

        // only change style if the value changed
        if (this.animationState[el] === animate) return;

        this.animationState[el] = animate;

        const _el: HTMLElement = el === 'indicator'? this.indicator.nativeElement : this.tabButtonsBar.nativeElement;
        const value: string = animate? `all ${this.config.transitionDuration}ms ${this.config.transitionEase}` : 'initial';

        this.rnd.setStyle(_el, this.plt.Css.transition, value);
    }
    indexSegmentButtonWidths() {
        let index = [], total = 0;

        this.tabButtons.forEach((btn: SuperTabButton, i: number) => {
            index[i] = btn.getNativeElement().offsetWidth;
            total += index[i];
        });

        this.segmentButtonWidths = index;
        this.segmentWidth = total;
    }
}